<template>
  <div class="login">
    <div class="login__container">
      <div class="login__container__form">
        <div class="login__container__form__title">数据驾驶舱</div>
        <div class="login__container__form__input">
          <input
            type="text"
            placeholder="用户名"
            v-model="userData.account"
            :maxlength="20"
          />
        </div>
        <div class="login__container__form__input">
          <input
            type="password"
            placeholder="密码"
            v-model="userData.password"
            :maxlength="20"
          />
        </div>
        <button class="login__container__form__button" @click="login()">
          普通登录
        </button>
        <button class="login__container__form__button" @click="kmLogin()">
          KM登录
        </button>
      </div>
    </div>
  </div>
  <!-- 放登出的垃圾页面 -->
  <div id="iframe-box" style="opacity: 0"></div>
</template>

<script setup lang="ts">
import router from '@/router/index'
import { reactive } from 'vue'
import { localSet } from '@/Utils/storage'
const userData = reactive({
  account: 'xiaoming',
  password: '123456',
})

// 登录
const login = async () => {
  if (userData.account === '' || userData.password === '') {
    alert('请输入用户名和密码')
    return
  }
  localSet('token', '123456')
  localSet('userData', { account: userData.account })
  alert('登录成功')
  router.push('/')
}

/**
 * @description: 配置及引入iframe
 * @return void
 */
const setNewIframe = (url) => {
  let iframe: any = document.createElement('iframe')
  iframe.src = url
  iframe.height = 0
  iframe.width = 0
  iframe.id = 'cnsso'

  document.getElementById('iframe-box')?.appendChild(iframe) //向指定dom插入iframe
}

// km登录
const kmLogin = async () => {
  // 先登出
  const gotoLogout = () => {
    const client_id = import.meta.env.VITE_CNSSO_CLIENT_ID as string // 单点登录的client_id
    const cnsso_domain = import.meta.env.VITE_CNSSO_DOMAIN as string // 单点登录的域名
    const redirect_url = location.href.split('?')[0] // 截取?之前的内容
    // 如果redirect_uri包含localhost,直接提示
    if (
      redirect_url.indexOf('localhost') > -1 ||
      redirect_url.indexOf('127.0.0.1') > -1
    ) {
      alert(
        '当前环境不支持km登录,请发布到服务器,并且配置正确的VITE_CNSSO_CLIENT_ID'
      )
      return ''
    }
    const logout_url = `${cnsso_domain}IAM/ssologout.action?response_type=code&client_id=${client_id}&redirectUrl=${encodeURIComponent(
      redirect_url
    )}`

    // 将登出的链接,嵌入一个看不见的iframe里面,就相当于登出了
    setNewIframe(logout_url)
    setTimeout(() => {
      const login_url = `${cnsso_domain}IAM/oauth/authorize?client_id=${client_id}&redirect_uri=${encodeURIComponent(
        redirect_url
      )}`
      location.href = login_url
    }, 1000)
  }
  gotoLogout()
}
</script>

<style lang="scss" scoped>
.login {
  background-color: #f0f0f0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login__container {
  background-color: #fff;
  // 媒体查询,电脑30vw
  @media screen and (min-width: 912px) {
    width: 30vw;
  }
  // 手机横屏
  @media screen and (max-width: 912px) and (orientation: landscape) {
    width: 50vw;
  }
  // 手机竖屏
  @media screen and (max-width: 912px) and (orientation: portrait) {
    width: 75vw;
  }
  // 手机横屏
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
}

.login__container__form__title {
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 20px;
}

.login__container__form__input {
  width: 100%;
  height: 40px;
  border-radius: 10px;
  border: 1px solid #000;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login__container__form__input input {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  padding: 0 20px;
  border-radius: 10px;
}

.login__container__form__button {
  width: 100%;
  height: 50px;
  border-radius: 10px;
  border: none;
  outline: none;
  background-color: #000;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-top: 20px;
}
</style>
